<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图书列表</title>
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        #login {
            height: 40px;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-6"></div>
                        <div class="col-lg-6" style="height: 40px;">
                            <div class="dropdown" style="float: right;">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    ${user.email}
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="min-width: 50px;">
                                    <li><a href="LoginoutServlet">注销</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%
    Object user = session.getAttribute("user");
    if (user == null) {
        response.sendRedirect("login.jsp");
    }
%>


<div class="container" style="margin-top: 10px;">
    <h1 class="text-center">图书列表</h1>
</div>
<div class="container">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>图书ID</th>
            <th>图书名称</th>
            <th>图书作者</th>
            <th>图书分类</th>
            <th>图书价格</th>
            <th colspan="2" class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>

<%--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>--%>

<div class="container">
    <a href="AddBookToServlet">添加图书</a>
</div>
<div class="container">
    <nav aria-label="Page navigation" class="text-right">
        <ul class="pagination">

        </ul>
    </nav>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="dist/js/bootstrap.js"></script>

<script>
    var pageNo = 1;
    var pageSize = 2;
    var pageCount = 0;

    // showPage(6, 10)
    $.getJSON("BookPageJsonServlet", {pageNo: pageNo, pageSize: pageSize}, function (data) {
        console.log(data);
        pageCount = data.pageCount;

        //设置当前页数据
        var list = data.page;
        var s = "";
        for (let i = 0; i < list.length; i++) {
            s += "<tr>\n" +
                "<td>" + list[i].bookId + "</td>\n" +
                "<td>" + list[i].bookName + "</td>\n" +
                "<td>" + list[i].authorName + "</td>\n" +
                "<td>" + list[i].category.categoryName + "</td>\n" +
                "<td>" + list[i].price + "</td>\n" +
                "<td class=\"text-center\">\n" +
                "<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"DeleteBookServlet?bookId=" + list[i].bookId + "\">删除</a>\n" +
                "</td>\n" +
                "<td class=\"text-center\">\n" +
                "<a class=\"btn btn-primary\" href=\"UpdateToBookServlet?bookId=" + list[i].bookId + "\">更新</a>\n" +
                "</td>\n" +
                "</tr>";
        }
        $("#tb").html(s);

        showPage(pageNo, pageCount);
        currentPageCss(pageNo);
        bindEvent(pageNo, pageCount);
    });

    /**
     * 事件绑定函数
     */
    function bindEvent(pageNo, pageCount) {
        //绑定中间页
        var mids = $(".mid");
        for (let i = 0; i < mids.length; i++) {
            $(mids[i]).click(function () {
                // console.log(this)
                pageNo = parseInt(this.innerHTML);
                $.getJSON("BookPageJsonServlet", {pageNo: pageNo, pageSize: pageSize}, function (data) {
                    console.log(data);
                    pageCount = data.pageCount;

                    //设置当前页数据
                    var list = data.page;
                    var s = "";
                    for (let i = 0; i < list.length; i++) {
                        s += "<tr>\n" +
                            "<td>" + list[i].bookId + "</td>\n" +
                            "<td>" + list[i].bookName + "</td>\n" +
                            "<td>" + list[i].authorName + "</td>\n" +
                            "<td>" + list[i].category.categoryName + "</td>\n" +
                            "<td>" + list[i].price + "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"DeleteBookServlet?bookId=" + list[i].bookId + "\">删除</a>\n" +
                            "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a class=\"btn btn-primary\" href=\"UpdateToBookServlet?bookId=" + list[i].bookId + "\">更新</a>\n" +
                            "</td>\n" +
                            "</tr>";
                    }
                    $("#tb").html(s);

                    showPage(pageNo, pageCount);
                    currentPageCss(pageNo);
                    bindEvent(pageNo, pageCount);
                });
                // console.log(pageNo)
            });
        }


        //绑定上一页
        $("#preId").click(function () {
            if (pageNo <= 1) {
                alert("已经是第一页了");
            } else {
                pageNo = pageNo - 1;
                $.getJSON("BookPageJsonServlet", {pageNo: pageNo, pageSize: pageSize}, function (data) {
                    console.log(data);
                    pageCount = data.pageCount;

                    //设置当前页数据
                    var list = data.page;
                    var s = "";
                    for (let i = 0; i < list.length; i++) {
                        s += "<tr>\n" +
                            "<td>" + list[i].bookId + "</td>\n" +
                            "<td>" + list[i].bookName + "</td>\n" +
                            "<td>" + list[i].authorName + "</td>\n" +
                            "<td>" + list[i].category.categoryName + "</td>\n" +
                            "<td>" + list[i].price + "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"DeleteBookServlet?bookId=" + list[i].bookId + "\">删除</a>\n" +
                            "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a class=\"btn btn-primary\" href=\"UpdateToBookServlet?bookId=" + list[i].bookId + "\">更新</a>\n" +
                            "</td>\n" +
                            "</tr>";
                    }
                    $("#tb").html(s);

                    showPage(pageNo, pageCount);
                    currentPageCss(pageNo);
                    bindEvent(pageNo, pageCount);
                });
            }
        });

        //绑定下一页
        $("#nextId").click(function () {
            if (pageNo >= pageCount) {
                alert("已经是最后一页了");
            } else {
                pageNo = pageNo + 1;
                $.getJSON("BookPageJsonServlet", {pageNo: pageNo, pageSize: pageSize}, function (data) {
                    console.log(data);
                    pageCount = data.pageCount;

                    //设置当前页数据
                    var list = data.page;
                    var s = "";
                    for (let i = 0; i < list.length; i++) {
                        s += "<tr>\n" +
                            "<td>" + list[i].bookId + "</td>\n" +
                            "<td>" + list[i].bookName + "</td>\n" +
                            "<td>" + list[i].authorName + "</td>\n" +
                            "<td>" + list[i].category.categoryName + "</td>\n" +
                            "<td>" + list[i].price + "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a onclick=\"if(confirm('确定要删除吗?')){return true;}else{return false;}\" class=\"btn btn-primary\" href=\"DeleteBookServlet?bookId=" + list[i].bookId + "\">删除</a>\n" +
                            "</td>\n" +
                            "<td class=\"text-center\">\n" +
                            "<a class=\"btn btn-primary\" href=\"UpdateToBookServlet?bookId=" + list[i].bookId + "\">更新</a>\n" +
                            "</td>\n" +
                            "</tr>";
                    }
                    $("#tb").html(s);

                    showPage(pageNo, pageCount);
                    currentPageCss(pageNo);
                    bindEvent(pageNo, pageCount);
                });
            }
        });

        $("#prevId").click(function () {
            pageNo--;
            showPage(pageNo, pageCount);
            currentPageCss(pageNo);
        });

        $("#firstId").click(function () {
            pageNo = 1;
            showPage(pageNo, pageCount);
            currentPageCss(pageNo);
        });

        $("#lastId").click(function () {
            pageNo = pageCount;
            showPage(pageNo, pageCount);
            currentPageCss(pageNo);
        });
    }

    /**
     * 当前页样式设置
     */
    function currentPageCss(pageNo) {
        //获取中间页码的DOM对象
        var mids = $(".mid");
        for (let i = 0; i < mids.length; i++) {
            var pn = mids[i].innerHTML;
            console.log(pn)
            if (pn == pageNo) {
                let li$ = $(mids[i]).parent();
                li$.addClass("active");
            }
        }
    }


    /*
    生成分页样式
    展示5页数据
     */
    function showPage(pageNo, pageCount) {
        var s = '<li><a id="preId" href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>';
        if (pageCount < 5) {
            for (let i = 1; i <= pageCount; i++) {
                s += '<li><a class="mid" href="#">' + i + '</a></li>'
            }
        } else {
            if (pageNo <= 5) {
                for (let i = 1; i <= 5; i++) {
                    s += '<li><a class="mid" href="#">' + i + '</a></li>'
                }
            } else {
                for (let i = pageNo - 4; i <= pageNo; i++) {
                    s += '<li><a class="mid" href="#">' + i + '</a></li>'
                }
            }
        }

        s += '<li><a id="nextId" href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>';
        $(".pagination").html(s);
    }
</script>
</body>
</html>
